<!-- 账户余额 -->
<template>
	<view class="AccountBalance">
		<view class="statistics f-background radius20 margin-bottom-20 text-align">
			<view class="color3 size-28 margin-bottom-20">账户总金额(元)</view>
			<view class="pars font-weight-600 color3"><text class="size-50">￥</text>{{infoData.allAmount || 0}}</view>
			<u-button type="primary"
				:customStyle="{width: '380rpx',height: '84rpx',borderRadius: '100rpx',margin: '36rpx auto 20rpx'}"
				color="#EB0000" @click="onJumpPage('withdraw')">
				<text class="color-f size-34">提现</text>
			</u-button>
			<view class="color6 size-24">当日送达的订单服务费次日结算</view>
			<view class="usable border-top">
				<view class="usable-qu">
					<view class="color3 size-24 margin-bottom-12">可提现金额(元)</view>
					<view class="color0 size-38 font-weight-600">{{infoData.amount || 0}}</view>
				</view>
				<view class="background-05"></view>
				<view class="usable-qu">
					<view class="color3 size-24 margin-bottom-12">待结算金额(元)</view>
					<view class="color0 size-38 font-weight-600">{{infoData.locking || 0}}</view>
				</view>
				<view class="background-05"></view>
				<view class="usable-qu">
					<view class="color3 size-24 margin-bottom-12">已提现金额(元)</view>
					<view class="color0 size-38 font-weight-600">{{infoData.checkout || 0}}</view>
				</view>
			</view>
		</view>
		<navigator hover-class="none" url="/packageColonel/bean-manag/detail-list?type=5"
			class="record f-background radius20 margin-bottom-20 dis-cen">
			<text class="color3 size-30">提现记录</text>
			<text class="iconfont icon-right-1-copy color9 size-30"></text>
		</navigator>
		<navigator hover-class="none" url="/packageColonel/bean-manag/detail-list?type=6"
			class="record f-background radius20 margin-bottom-20 dis-cen">
			<text class="color3 size-30">资金明细</text>
			<text class="iconfont icon-right-1-copy color9 size-30"></text>
		</navigator>
	</view>
</template>

<script>
	const url = {
		withdraw: '/packageGrid/withdraw/withdraw', // 提现
	}
	import { DeliveryUserInfo } from "@/api/index"
	export default {
		data() {
			return {
				infoData: {}
			}
		},
		onShow() {
			this.postDeliveryUserInfo()
		},
		methods: {
			async postDeliveryUserInfo() {
				const { code, data } = await DeliveryUserInfo()
				if (code == "200") {
					this.infoData = data
				}
			},
			onJumpPage(name) {
				let urlData = url[name]
				uni.navigateTo({
					url: urlData
				});
			}
		}
	}
</script>

<style lang="scss">
	.AccountBalance {
		padding: 20rpx 24rpx;

		.statistics {
			padding: 86rpx 0 0;

			.pars {
				font-size: 80rpx;
			}

			.usable {
				display: grid;
				grid-template-columns: 1fr 1px 1fr 1px 1fr;
				margin-top: 68rpx;
				align-items: center;

				.usable-qu {
					padding: 24rpx 0 30rpx;
				}

				.background-05 {
					height: 92rpx;
				}
			}
		}

		.record {
			padding: 40rpx 20rpx;
		}
	}
</style>